<template>
    <div>
        <el-dialog :visible.sync="value" center width="70%" title="批阅问答" :show-close="false">
            <el-row :gutter="40">
                <!-- 展示问答题题干 -->
                <el-col :span="6">
                    <el-card  :key="ask.id" v-for="(ask,index) in list.asks" style="margin-bottom: 30px;">
                        <template slot="header">第{{index + 1}}题</template>
                        <span v-html="ask.askContent"></span>
                    </el-card>
                </el-col>
                <!-- 学生列表 -->
                <el-col :span="18">
                    <el-table :data="list.list" :height="900" size="mini" :header-cell-style="{background:'#C0C4CC',color:'white',fontSize:'15px'}">
                        <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
                        <el-table-column prop="user.nickName" label="姓名" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="openChildWindow(scope.row)" icon="el-icon-postcard" type="info" size="mini" plain></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-dialog>

        <!-- 给定问答题分数窗口(单人) -->
        <el-dialog :visible.sync="childValue" center :show-close="false">
            <el-card v-for="item in studentAskList" :key="item.id" style="border: 0px;margin-bottom: 20px;" >
                <el-card style="border: 0px;" shadow="never">
                    <template slot="header">
                        {{item.askAnswer}}
                    </template>
                    <p>所给分数: <el-input v-model="item.score" style="width: 220px;" placeholder="请输入分数"></el-input></p>
                    <p>教师评语: <el-input v-model="item.teacherComment" style="width: 220px;"  placeholder="请输入教师评语"></el-input></p>
                </el-card>
            </el-card>
            <template slot="footer">
                <el-button type="info" icon="el-icon-plus" plain @click="handleAskScore" v-loading.fullscreen.lock="fullscreenLoading">给定分数</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>

    import { getStudentAskResultList ,updateStudentAskScore} from '@/api/academic/exam'

    export default {
        name: "student-exam-correct",
        data(){
            return {
                value : false,
                fullscreenLoading:false,
                childValue:false,
                parentData:{},
                list:[],
                studentAskList:[]
            }
        },
        watch:{
            value(data){
                if(data){
                    //获得该试卷所有学生的所有问答题
                    this.getStudentAskResultList(this.parentData);
                }
            }
        },
        methods:{
            openChildWindow(row){
                this.studentAskList = row.list; //把当前页面学生的问答题集合赋值给params.list
                this.childValue = true;
            },
            getStudentAskResultList(data){
                getStudentAskResultList(data).then(res=>{
                    this.list = res.data.data;

                });
            },
            handleAskScore(){
                this.fullscreenLoading = true;
                updateStudentAskScore(this.studentAskList).then(res=>{
                    if(!res.data.success){ //未全部批阅完成
                        // this.$message({
                        //     type:res.data.success?'success':'error',
                        //     message:res.data.message,
                        //     center:true
                        // });
                        this.childValue = false;
                        this.fullscreenLoading = false;
                        this.getStudentAskResultList(this.parentData);
                    }else{
                        this.value = false;
                        this.childValue = false;
                        this.fullscreenLoading = false;
                        this.$message.success({message:res.data.message,center:true});
                        this.$parent.getExamList(this.$parent.params);
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>